<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>如意工具箱</title>
    <link rel="icon" href="">
	<link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/app.css">
  </head>
  <body>
  	<div class="container-fluid">
  		<form class="form-inline" style="margin: 20px 0px;text-align: center;">
			<div class="input-group">
			    <input id="searchInput" type="text" class="form-control" /><span class="input-group-addon btn btn-primary" id="searchBtn">搜索</span>
			</div>
		</form>

  		<div class="panel panel-default">
  			<div class="panel-heading">
  				<h3 class="panel-title">我的 <a id="add-app-link" href="#" data-toggle="modal" data-target="#addAppDlg">添加</a></h3>
  			</div>
  			<div class="panel-body" id="my_app_list">
  				
  			</div>
  		</div>

  		<div class="panel panel-default">
		  <div class="panel-heading">
		    <h3 class="panel-title">精选</h3>
		  </div>
		  <div class="panel-body" id="choice_app_list">
		    
		  </div>
		</div>
  		
  	</div>

  	<div id="addAppDlg" class="modal fade" role="dialog" aria-labelledby="addAppDlgTitle">
  		<div class="modal-dialog" role="document">
  			<div class="modal-content">
  				<div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="addAppDlgTitle">添加应用</h4>
			    </div>
			    <div class="modal-body">
			    	<form class="form-horizontal">
			    	  <div class="form-group">
					    <label class="col-sm-2 control-label">应用名称</label>
					    <div class="col-sm-10">
					      <input name="appName" type="text" class="form-control" required="required" />
					    </div>
					  </div>
					  <div class="form-group">
					    <label class="col-sm-2 control-label">运行命令</label>
					    <div class="col-sm-10">
					      <div class="input-group file-input">
							   <input name="cmdInput" type="text" class="form-control" required="required"/><label class="input-group-addon btn btn-primary">浏览...</label>
						  </div>
					    </div>
					  </div>
					  <div class="form-group">
					    <label class="col-sm-2 control-label">应用图标</label>
					    <div class="col-sm-10">
					       <div class="input-group file-input" data-accept="image/*">
							   <input name="appIcon" type="text" class="form-control" /><label class="input-group-addon btn btn-primary">浏览...</label>
						  </div>
					    </div>
					  </div>
					  <div class="form-group">
					    <label class="col-sm-2 control-label">应用类型</label>
					    <div class="col-sm-10">
					      	<div class="radio">
							  <label>
							    <input type="radio" name="appType" value="console" checked>
							    控制台
							  </label>
							</div>
							<div class="radio">
							  <label>
							    <input type="radio" name="appType" value="dialog">
							    对话框
							  </label>
							</div>
							<div class="radio">
							  <label>
							    <input type="radio" name="appType" value="window">
							    窗口
							  </label>
							</div>
					    </div>
					  </div>
					</form>
			    </div>
			    <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button name="finishBtn" type="button" class="btn btn-primary">完成</button>
			    </div>
			</div>
  		</div>
  	</div>

  	<div id="dialogAppContainer" class="modal fade" role="dialog" aria-labelledby="dialogAppTitle">
  		<div class="modal-dialog" role="document">
  			<div class="modal-content">
  				<div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="dialogAppTitle"></h4>
			    </div>
			    <div class="modal-body">

			    </div>
  			</div>
  		</div>
  	</div>

  	<script id="my-app-list" type="text/html">
  		{{each data item}}
  		<a 
  			{{if item.type=='window'}}href="{{item.cmd}}" target="_blank" {{/if}}
  			{{if item.type=='dialog'}}href="#" data-toggle="modal" data-target="#dialogAppContainer"{{/if}} 
  			{{if item.type=='console'}}href="#"{{/if}}
			  data-id="{{item.id}}" 
			  data-name="{{item.name}}" 
			  data-type="{{item.type}}" 
			  data-cmd="{{item.cmd}}" 
			  data-params="{{item.params}}"
			  draggable="true"
  			class="my-app">
  			{{if item.icon}}
				<img src="{{item.icon}}" class="app-icon" />
			{{else}}
				<div class="app-icon text-icon">{{item.name.split('')[0].toUpperCase()}}</div>
			{{/if}}
			<div class="app-name">{{item.name}}</div>
		</a>
		{{/each}}
  	</script>

  	<script id="choice-app-list" type="text/html">
  		{{each data item index}}
  		
  		{{if index%3==0 }}
  		<div class="row">
  		{{/if}}

	      <div class="col-xs-4">
		  	<a 
		  		{{if item.type=='window'}}href="{{item.cmd}}" target="_blank" {{/if}}
	  			{{if item.type=='dialog'}}href="#" data-toggle="modal" data-target="#dialogAppContainer"{{/if}} 
	  			{{if item.type=='console'}}href="#"{{/if}}
				  data-name="{{item.name}}" 
				  data-type="{{item.type}}" 
				  data-cmd="{{item.cmd}}" 
				  data-params="{{item.params}}"
				  class="media choice-app">
		  		<div class="media-left">
		  			{{if item.icon}}
						<img src="{{item.icon}}" class="media-object app-icon" />
					{{else}}
						<div class="media-object app-icon text-icon">{{item.name.split('')[0].toUpperCase()}}</div>
					{{/if}}
		  		</div>
		  		<div class="media-body">
		  			<div class="media-heading app-name">{{item.name}}</div>
		  			<span class="app-desc">{{item.desc}}</span>
		  		</div>
		  	</a>
		  </div>

		{{if (index%3==2)||(index==data.length-1) }}
		</div>
		{{if index!=data.length-1}}<hr/>{{/if}}
		{{/if}}
		
		{{/each}}
  	</script>

    <script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/template-web.js"></script>
    <script type="text/javascript" src="./js/fileinput.js"></script>
    <script type="text/javascript" src="./js/app.js"></script>
  </body>
</html>
